<template>
 <div class="banner">
        <div class="bgcbanner">
            <van-swipe :autoplay="3000">
                <van-swipe-item v-for="(image, index) in images" :key="index">
                <img :src="image" />
                </van-swipe-item>
            </van-swipe>
        </div>
 </div>
</template>

<script>
export default {
    data(){
        return{
            images:['//m15.360buyimg.com/mobilecms/jfs/t1/85450/4/33489/56175/63c10c85F24438601/27a3986f8ac0e9c8.jpg!cr_1053x420_4_0!q70.jpg',
                    '//m15.360buyimg.com/mobilecms/jfs/t1/193638/31/31325/131943/63cb2fc6Fc80cb5be/26583a80b0b24f5f.jpg!cr_1125x449_0_166!q70.jpg',
                    '//m15.360buyimg.com/mobilecms/jfs/t1/71027/1/18167/64265/63cf21e5F2c728b99/da51edd5b9d248f9.jpg!cr_1125x449_0_166!q70.jpg',
                    '//imgcps.jd.com/ling4/10042489330542/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-60541365d250103053e030ee/1674915d/cr_1125x449_0_166/s/q70.jpg',
                    '//m15.360buyimg.com/mobilecms/jfs/t1/162891/11/30261/86346/63cde0f9F9caa4f0b/4d676a2598ba29c2.jpg!cr_1125x449_0_166!q70.jpg',
                    '//m15.360buyimg.com/mobilecms/s1062x420_jfs/t1/19535/26/20349/38863/63aa4f80Fa0f42c16/e8006c8573dcf124.jpg!cr_1053x420_4_0!q70.jpg',
                    '//m15.360buyimg.com/mobilecms/jfs/t1/102331/2/36162/32408/63be79ceF8313dfa9/3eabe220d2d5ed1f.jpg!cr_1053x420_4_0!q70.jpg',
                    '//m15.360buyimg.com/mobilecms/s1062x420_jfs/t1/66479/13/21399/65518/62e271dfE4dc4181f/2d7c014f2d37b45b.jpg!cr_1053x420_4_0!q70.jpg'
                
                ]
        }
    }
}
</script>

<style scoped>
.banner{
    width: 100vw;
    height: 37.3333vw;
    overflow: hidden;
    margin-top: 11.7vw;
}
.bgcbanner{
    box-sizing: border-box;
    width: 133.3333vw;
    height: 26.6667vw;
    transform: translateX(-16.6667vw);
    background: linear-gradient(#c82519, #e64532);
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    display: flex;
    justify-content: center;
}
.van-swipe{
    position: absolute;
    width: 93.3333vw;
    height: 37.3333vw;
    border-radius: 1.6667vw;
}
img{
    width: 100%;
    height: 100%;
}
</style>